<template>
  <div class="container">
    <div class="m_container">
      <div class="search">
        <el-input
            v-model="searchName"
            class="input"
            placeholder="Type something"
            style="width: 200px"
            :prefix-icon="Search"
        />
        <div class="el_button_group">
          <el-button type="primary" :icon="Plus" @click="showAddDialog" plain>添加黑名单</el-button>
        </div>
      </div>

      <div class="table">
        <el-table :data="numberedFilteredList" border style="width: 100%">
          <el-table-column prop="index" label="ID"></el-table-column>
          <el-table-column prop="name" label="Name"></el-table-column>
          <el-table-column prop="info" label="Description"></el-table-column>
          <el-table-column label="Options" >
            <template #default="scope">
              <el-button type="danger" @click="deleteItem(scope.$index)">删除信息</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>

      <!-- 添加老人弹窗 -->
      <el-dialog title="Add Elder" v-model="addDialogVisible">
        <el-form :model="form">
          <el-form-item label="Name">
            <el-input v-model="form.name" />
          </el-form-item>
          <el-form-item label="Description">
            <el-input v-model="form.info" />
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="cancelAddDialog">Cancel</el-button>
          <el-button type="primary" @click="saveEmptyRow">Save</el-button>
        </div>
      </el-dialog>

      <!-- 编辑老人弹窗 -->
      <el-dialog title="Edit Elder" v-model="editDialogVisible">
        <el-form :model="form">
          <el-form-item label="Name">
            <el-input v-model="form.name" />
          </el-form-item>
          <el-form-item label="Description">
            <el-input v-model="form.info" />
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="cancelEditDialog">Cancel</el-button>
          <el-button type="primary" @click="saveEditRow">Save</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, computed } from 'vue';
import { addBlackList, deleteBlackList, showBlackList } from "@/api/InforManage";
import { Plus, Search, Delete } from '@element-plus/icons-vue'

const list = ref([]);
const form = reactive({
  id: 0,
  name: '',
  info: ''
});
const addDialogVisible = ref(false);
const editDialogVisible = ref(false);

const fetchData = async () => {
  try {
    const response = await showBlackList();
    list.value = response.data.list.map(item => ({
      ...item,
      user: reactive({
        name: item.name,
        info: item.info
      })
    }));
  } catch (error) {
    console.error(error);
  }
};

const searchName = ref("");
const filteredList = computed(() => {
  if (searchName.value === "") {
    return list.value;
  } else {
    return list.value.filter(item =>
        item.name.toLowerCase().includes(searchName.value.toLowerCase())
    );
  }
});

const numberedFilteredList = computed(() => {
  return filteredList.value.map((item, index) => ({
    ...item,
    index: index + 1
  }));
});

const showAddDialog = () => {
  Object.assign(form, { id: 0, name: '', info: '' });
  addDialogVisible.value = true;
};

const cancelAddDialog = () => {
  addDialogVisible.value = false;
};

const showEditDialog = (index) => {
  Object.assign(form, list.value[index].user);
  form.id = index;
  editDialogVisible.value = true;
};

const cancelEditDialog = () => {
  editDialogVisible.value = false;
};

const saveEmptyRow = async () => {
  const requestData = {
    name: form.name,
    info: form.info
  };
  try {
    const response = await addBlackList(requestData);
    if (response.data.respCode === '000000') {
      fetchData();
      addDialogVisible.value = false;
    } else {
      console.error(response.data.respMsg);
    }
  } catch (error) {
    console.error('Error adding elder:', error);
  }
};

const saveEditRow = async () => {
  const requestData = {
    name: form.name,
    info: form.info
  };
  try {
    const response = await addBlackList(requestData);  // Note: Assuming API call is same for editing
    if (response.data.respCode === '000000') {
      Object.assign(list.value[form.id].user, form);
      editDialogVisible.value = false;
    } else {
      console.error(response.data.respMsg);
    }
  } catch (error) {
    console.error('Error editing elder:', error);
  }
};

const deleteItem = async (index) => {
  const requestData = {
    name: list.value[index].user.name
  };
  try {
    const response = await deleteBlackList(requestData);
    if (response.data.respCode === '000000') {
      list.value.splice(index, 1);
      fetchData();
    } else {
      console.error(response.data.respMsg);
    }
  } catch (error) {
    console.error('Error deleting elder:', error);
  }
};

fetchData();
</script>

<style scoped>
.container {
  display: flex;
  justify-content: center;
}

.m_container {
  width: 100%;
  margin: 20px auto;
  padding: 20px;
  background-color: #ffffff;
  border-radius: 10px;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
}

.search {
  margin-bottom: 20px;
}

.table {
  margin-bottom: 20px;
}

.el_button_group {
  display: flex;
  justify-content: end;
  margin-top: 10px;
}

.dialog-footer {
  text-align: right;
}
</style>
